<!DOCTYPE html>
<html>
	<head>
		<title>放大镜效果</title>
		<meta charset="utf-8">
		<style type="text/css">
			body {
				position: relative;
			}

			* {
				margin: 0;
				padding: 0;
			}

			#Box {
				margin-left: 500px;
				height: 300px;
				width: 300px;
				position: relative;
				border: 1px solid gray;
			}

			#bigBox {
				height: 300px;
				width: 300px;
				position: absolute;
				top: 0;
				left: 810px;
				overflow: hidden;
				display: none;
				border: 1px solid gray;
			}

			#Box img {
				height: 300px;
				width: 300px;
			}

			#lay {
				background: #fff;
				border: 1px solid gray;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0.5;
				display: none;
				filter: alpha(opacity=50);
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var Box = document.getElementById("Box");
				var bigBox = document.getElementById("bigBox");
				var bigbox = getChildNodes(bigBox)[0];
				var lay = document.getElementById("lay");
				//鼠标移入时，将放大镜和bigBox显示出来
				Box.onmouseover = function() {
					lay.style.display = "block";
					bigBox.style.display = "block";
				}
				//鼠标移出时，将放大镜和bigBox隐藏起来
				Box.onmouseout = function() {
					lay.style.display = "none";
					bigBox.style.display = "none";
				}
				Box.onmousemove = function(e) {
					var scale = 2; //图片的放缩比例
					var event = event || window.event;
					var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
					var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
					var pageX = event.pageX || event.clientX + scollLeft;
					var pageY = event.pageY || event.clientY + scollTop;
					//将鼠标放到放大镜的中间
					var x = pageX - Box.offsetLeft - lay.offsetWidth / 2;
					var y = pageY - Box.offsetTop - lay.offsetHeight / 2;
				//左边界
					//将拖拽小盒子的宽高与盒子的宽高结合起来按比例放缩
					lay.style.width = parseInt(Box.offsetWidth / scale) + "px";
					lay.style.height = parseInt(Box.offsetHeight / scale) + "px";
					//设置大盒子里图片的宽高
					bigbox.style.width = Box.offsetWidth * scale + "px";
					bigbox.style.height = Box.offsetHeight * scale + "px";
					if (x < 0) {
						x = 0; //左边界的判断，当超出时将x置为0;
					}
					//右边界的判断，当超出时将x置为Box的宽度减去放大镜的宽度;
					if (x >= Box.offsetWidth - lay.offsetWidth) {
						x = Box.offsetWidth - lay.offsetWidth;
					}
					//下边界的判断，当超出时将y置为Box的高度减去放大镜的高度;
					if (y >= Box.offsetHeight - lay.offsetHeight) {
						y = Box.offsetHeight - lay.offsetHeight;
					}
					if (y < 0) {
						y = 0; //上边界的判断，当超出时将y置为0;
					}
					lay.style.left = x + "px";
					lay.style.top = y + "px";
					//同比例放缩，大的盒子图片的放缩比例，当小盒子向右移动的时候，大盒子向左移动同等的比例的宽高，方向是相反的
					var left = lay.offsetLeft * scale;
					var top = lay.offsetTop * scale;
					bigbox.style.marginLeft = (left * (-1)) + "px";
					bigbox.style.marginTop = (top * (-1)) + "px";


				}

			}
			//获取孩子的节点
			function getChildNodes(element) {
				var arr = [];
				var eList = element.childNodes;
				for (var i = 0; i < eList.length; i++) {
					if (eList[i].nodeType == 1) { //过滤空白节点
						arr.push(eList[i]);
					}
				}
				return arr;
			}
		</script>

	</head>
	<body>
		<div id="Box">
			<img
				src="https://img12.360buyimg.com/n7/jfs/t1/142383/17/13825/73504/5fa8b1c8E6a34854c/91c7d2bb5ea7f9aa.jpg" />
			<span id="lay"></span>
		</div>
		<div id="bigBox">
			<img
				src="https://img12.360buyimg.com/n7/jfs/t1/142383/17/13825/73504/5fa8b1c8E6a34854c/91c7d2bb5ea7f9aa.jpg" />
		</div>
	</body>
</html>
